<template>
  <div class="main-container" style="height: 100%; background: white" id="main-container">
    <a-tabs   :lazy-load="true" type="card" justify @change="tabsChange" :default-active-key="pageData.tableIndex">
      <!-- <a-tab-pane title="创建需求单" key="1">
                            <div style="height: 100%;">
                               <ListofRequirements></ListofRequirements>
                            </div>
                    </a-tab-pane> -->
      <a-tab-pane title="需求单查询" key="1"  v-if="permissionStore.hasPermisson('xqjhd.xqdcx')">
        <div style="height: 100%">
          <QueryRequirementList></QueryRequirementList>
        </div>
      </a-tab-pane>
      <a-tab-pane title="需求单审核" key="2" v-if="permissionStore.hasPermisson('xqjhd.xqdsh')">
        <div style="height: 100%">
          <Requirement></Requirement>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, getCurrentInstance } from 'vue'
import ListofRequirements from '@/components/pcsingmagent/orderpurchase/ListofRequirements.vue'
import Requirement from '@/components/pcsingmagent/orderpurchase/Requirement.vue'
import QueryRequirementList from '@/components/pcsingmagent/orderpurchase/QueryRequirementList.vue'
import emitter from '@/hooks/useEventBus'
import usePermission from '@/store/modules/permission'
export default defineComponent({
  name: 'OrderPurchase',
  components: {
    ListofRequirements,
    Requirement,
    QueryRequirementList,
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const tabValue = ref<any>(proxy.$route.query.key)
    console.log(tabValue.value)
    const pageData = reactive({
      tableIndex: tabValue || '1',
    })

    const tabsChange = (e: string | number) => {
      emitter.emit('window-change')
      if (e === '1') {
        emitter.emit('QueryRequirementList')
      } else if (e === '2') {
        emitter.emit('Requirement')
      }
    }
    const permissionStore = usePermission()
    return {
      pageData,
      tabsChange,
      permissionStore
    }
  },
})
</script>

<style scoped>
:deep(.ag-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
  border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}
</style>